﻿import React from 'react';
import ReactDOM from 'react-dom';
import mirror, { actions, connect, Link } from 'mirrorx';

import { List, InputItem, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import { createForm } from 'rc-form';

import { FormattedMessage} from 'react-intl';

let captcha = 111111;
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			errorMap: {}
		}

		const Lang = window.LangMessage ||{};

		this.keyCodes = [{
			keycode: "loginName",
			text: Lang.phone_no ||"手机号",
			type: "phone",
			message: Lang.input_correct_phone ||"请输入正确的手机号",
			pattern: /[0-9\s]{13}/,
			required: true,  //默认是true
		}, {
			keycode: "password",
			text: Lang.log_pwd ||"登录密码",
			type: "password",
			required: true,
			pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/i,
			message: (Lang.text_input ||"请输入") + (Lang.log_pwd_rule ||"6-20位数字+字母组合"),
			placeholder: Lang.log_pwd_rule ||"6-20位数字+字母组合"
		},
			, {
			keycode: "rePassword",
			text: Lang.re_input ||"再次输入",
			type: "password",
			required: true,
			pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/i,
			message: Lang.re_input_pwd ||"请再次输入密码",
			placeholder: Lang.log_pwd_rule ||"6-20位数字+字母组合"
		},
		{
			keycode: "captcha",
			text: Lang.verify_code ||"验证码",
			required: true,
			extra: <button onClick={this.getCptcha}><FormattedMessage id='get_code' defaultMessage='获取验证码'/></button>
		}]
	}

	componentDidMount() {

	}



	getCptcha = () => {
		console.log("getCptcha...")
	}


	onErrorClick = (keyCode) => {
		const { getFieldError } = this.props.form;
		let msg = getFieldError(keyCode);
		if (msg) {
			T.showError(msg.join(","));
		}
	}

	submit = () => {
		const Lang = window.LangMessage ||{};
		this.props.form.validateFields((error, values) => {

			var errorMap = {}
			if (error) {
				for (var key in error) {
					errorMap[key] = 1;
				}
			} else {
				//T.showSuccess("没有错误");
				if(values.password != values.rePassword){
					T.showInfo(Lang.two_pwd_not_same || "两次密码输入不一致");
					return;
				}
				if(values.captcha != captcha){
					T.showInfo(Lang.verify_code_err || "验证码输入错误");
					return;
				}			
				values.loginName = T.trimAll(values.loginName)
				let data = {
					loginName: values.loginName,
					password: values.password
				}
				T.fetch({
						url: "/user/register.json",
						data: data,
					}).then((res) => {						
						if (res.success) {
							 actions.routing.push({
								pathname: 'registerSuccess'
								})
						}
				});
			}

			this.setState({
				errorMap
			});
			console.log(error, values);
		});
	}

	render() {
		const { getFieldProps, getFieldError } = this.props.form;
		let errors;
		const Lang = window.LangMessage ||{};
		return (<div className="">
			<WhiteSpace />
			<List>
				{this.keyCodes.map((item, index) =>
					<InputItem key={index}
						{...getFieldProps(item.keycode, {
							rules: [{
								required: item.required === undefined ? true : item.required,
								message: item.message || ((Lang.text_input ||"请输入") + item.text),
								pattern: item.pattern
							}]
						}) }
						type={item.type}
						maxLength={50}
						labelNumber={10}
						extra={item.extra}
						error={this.state.errorMap[item.keycode]}
						onErrorClick={this.onErrorClick.bind(this, item.keycode)}
						clear
						placeholder={Lang.text_input ||"请输入"}
					></InputItem>

				)}

			</List>
			<WhiteSpace />
			<WhiteSpace />
			<WingBlank>
				<Button className="diy_background diy_border" type="primary" onClick={this.submit}><FormattedMessage id='register' defaultMessage='注册'/></Button>

				<p className="mt30 tac f30">
			Has account？<Link to="/login" className="diy_color"><FormattedMessage id='log_right_now' defaultMessage='立即登录'/></Link>
				</p>
			</WingBlank>


		</div>)
	}
}

const AppForm = createForm()(App);

export default AppForm;